<template>
    <el-form label-position="right" inline class="demo-table-expand">
       
       
        <el-form-item label="id">                            
            <el-input v-model="row.id" v-show="false"></el-input>   
            <span style="padding-left:11px" v-show="true">{{row.id}}</span>                         
        </el-form-item>   
       
        <el-form-item label="内容">                            
            <el-input v-model="row.content" v-show="ismodify"></el-input>   
            <span style="padding-left:11px" v-show="!ismodify">{{row.content}}</span>                         
        </el-form-item>   
       
        <el-form-item label=" 是否启用">                            
            
            <span style="padding-left:11px" v-show="!ismodify">{{row.is_enable | enableFilter}}</span>     
            
            <el-select v-model="row.is_enable"  v-show="ismodify" placeholder="请选择">
                <el-option  v-for="item in seleOption" :key="item.key"  :label="item.value"  :value="item.key">
                </el-option>
            </el-select>                       
        </el-form-item>   
       
        <el-form-item>
            <el-button type="primary" class="skewing" @click="updateMeg($event)" size="small">修改</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import {formatDate} from '../js/date.js';
export default {
  props: ['row'],
  data() {
    return {
      ismodify: false,
      seleOption: [
          {key: 1, value:'是'},
          {key: 0, value:'否'}
      ]
    };
  },
  created() {},
  computed: {},
  methods: {
    updateMeg(event) {
      var btn = event.currentTarget;
      var flagText = btn.innerText;
      if (flagText === "修改") {
        btn.innerText = "保存";
        btn.classList.remove("el-button--primary");
        btn.classList.add("el-button--danger");
        this.ismodify = true;
      } else {
        btn.innerText = "修改";
        btn.classList.remove("el-button--danger");
        btn.classList.add("el-button--primary");
        this.ismodify = false;
        this.modifyDate(event);
      }
    },
    modifyDate(event){
        var url='http://127.0.0.1:7001/api/v2/about/'
        this.$axios.put('http://127.0.0.1:7001/api/v2/about/1',this.row).then((res)=>{   
                             
        }).catch((err)=>{
            console.log('modify err'+err)
        })
    }
  },
  filters: {
      formatDate(time) {
          var date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}
.el-form-item{margin:5px 0;}
.skewing{margin-left: 50px;}
</style>
<style>
.table .el-form-item .el-form-item__label{width:100px !important;}
.table .el-form-item__content{width: calc(100% - 110px);overflow :hidden}

</style>

